<template>
	<view class="index">
		<view class="equipment">
			<image src="../../static/c1.png" mode=""></image>
		</view>
		<view class="content">
			<ul>
				<li @click="handleClick1"><span>实时数据</span></li>
				<li @click="handleClick2"><span>配置参数</span></li>
				<li @click="handleClick3"><span>遥控输出</span></li>
				<li @click="handleClick4"><span>历史记录</span></li>
				<li @click="handleClick5"><span>产品信息</span></li>
				<li @click="handleClick6"><span>产品服务</span></li>
			</ul>
		</view>
		<view class="bottom">
			<p v-if='state'>状态：已连接</p>
			<p v-else>状态：已断开</p>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				state: false,
			}
		},
		onLoad(options) {
			// options 是一个对象，包含了从调用页面传递过来的所有参数
			console.log(options);
			// 解构
			// const {
			// 	name,
			// 	age
			// } = options;
			// 现在可以使用这些参数了
		},
		methods: {
			// 实时数据
			// handleClick1() {
			// 	console.log("实时数据");
			// 	uni.navigateTo({
			// 		// 
			// 		url: '../liveData/liveData?name=实时数据'
			// 	})
			// },
			handleClick1() {
				console.log("实时数据");
				uni.navigateTo({
					// 
					url: '../liveData/liveData?name=实时数据'
				})
			},
			handleClick2() {
				console.log("配置参数");
				uni.navigateTo({
					// 
					url: '../setParameter/setParameter?name=配置参数'
				})
			},
			handleClick3() {
				console.log("遥控输出");
				uni.navigateTo({
					// 
					url: '../telecontrol/telecontrol?name=遥控输出'
				})
			},
			handleClick4() {
				console.log("历史记录");
				uni.navigateTo({
					// 
					url: '../historicalData/historicalData?name=历史记录'
				})
			},
			handleClick5() {
				console.log("产品信息");
				uni.navigateTo({
					// 
					url: '../productInformation/productInformation?name=产品信息'
				})
			},
			handleClick6() {
				console.log("产品服务");
				uni.navigateTo({
					// 
					url: '../productService/productService?name=产品服务'
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	.index {
		.equipment {
			display: flex;
			justify-content: center;
			height: 40vh;
			align-items: center;

			image {
				width: 300rpx;
				height: 300rpx;
				display: block;
			}
		}

		.content {
			height: 52vh;
			// background-color: aqua;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			position: relative;
			overflow: hidden;

			ul {
				margin: auto;
				margin-top: 100rpx;
				// background-color: #fff;
				// padding: 30rpx;
				box-sizing: border-box;
				// flex: 0 0 60%;
				width: 60%;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;

				li {
					color: #6e5f4a;
					position: relative;
					// background: url("../../static/images/btnbg.png") no-repeat center;
					// background-size: 100% 100%;
					padding: 20rpx;
					margin: 25rpx;
					background-color: #f0851b;
					border-radius: 10rpx;
				}

				//伪元素
				li::after {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					// background: url('../../static/images/btnbg.png') no-repeat center;
					// background-size: 90% 90%;
					// opacity: 0.5; /* 只影响背景图片的透明度 */
					// pointer-events: none; /* 防止伪元素影响交互 *
				}

			}
		}

		.bottom {
			display: flex;
			justify-content: center;
			font-size: 24rpx;
			color: black;
		}
	}
</style>